<template>
	<view class="categoryContainer">
		<view class="categoryItem" v-for="(categoryItem, index) in categoryModule" :key="index">
			<image class="categoryImage" :src="categoryItem.titlePicUrl"></image>
			<scroll-view class="categoryScroll" scroll-x>
				<view class="scrollItem" v-for="(item, index) in categoryItem.itemList" :key="item.id">
					<image :src="item.listPicUrl"></image>
					<text>{{ item.name }}</text>
				</view>
				<view class="scrollItem more">
					<text>查看更多</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex"
	
export default {
	name: 'Category',
	computed: {
		...mapGetters(["categoryModule"])
	}
};
</script>

<style lang="stylus">
.categoryContainer
	margin-top 10rpx
	.categoryItem
		margin-bottom 10rpx
		.categoryImage
			width 100%
			height 370rpx
		.categoryScroll
			display flex
			width 100%
			white-space nowrap
			margin-top 5rpx
			.scrollItem
				width 200rpx
				display inline-block
				margin-left 20rpx
				vertical-align top
				&.more
					height: 200rpx
					text-align center
					line-height 200rpx
					background-color #eee
					border-radius 10rpx
				image
					width 200rpx
					height 200rpx
					border-radius 10rpx
				text
					width 100%
					display -webkit-box
					overflow hidden
					white-space pre-wrap
					-webkit-box-orient vertical
					-webkit-line-clamp 2
					background-color #eee
					font-size 24rpx
				
</style>
